<template>
	<view class="tabs">
		<uni-swiper-dot :info="info" :current="current" field="content" mode="round">
			<swiper class="swiper-box" @change="change">
				<swiper-item v-for="(item ,index) in info" :key="index">
					<view class="swiper-item">
						{{item.content}}
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>




		<view class="a">
			<!-- 默认不显示滚动条 -->
			<!-- scroll-into-view :值为子元素的ID，哪个方向可滚动，则滚动到这个元素 scroll-into-view="scrollInto"-->
			<!-- 回弹效果自带 -->
			<scroll-view scroll-x="true" class="scroll" :scroll-into-view="scrollInto">
				<view class="item">
					<view @click="ontabtap" class="item1" v-for="(item,index) in sortList" :key="item.id" :id="item.id" :data-current="index">
						<text :class="tabIndex==index ? 'tab-active' : ''">{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 滚动条end -->

		<swiper class="swiper-box" :current="tabIndex" @change="ontabChange" :indicator-dots="false" :autoplay="false"
		 duration="300">
			<swiper-item>

				<scroll-view scroll-y="true" class="scroll-v">
					<view class="">
						<view>1</view>
						<view>2</view>
						<view>2</view>
						<view>1</view>
						<view>2</view>
						<view>2</view>
						<view>1</view>
						<view>2</view>
						<view>2</view>
						<view>1</view>
						<view>2</view>
						<view>2</view>
						<view>1</view>
						<view>2</view>

					</view>

				</scroll-view>

			</swiper-item>
			<swiper-item>
				<view class="swiper-item">2</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">3</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">3</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">3</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">3</view>
			</swiper-item>
		</swiper>


	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components: {
			uniSwiperDot
		},
		data() {
			return {
				info: [{
					content: '/static/imgs/banner-image1.png'
				}, {
					content: '/static/imgs/banner-image1.png'
				}, {
					content: '/static/imgs/banner-image1.png'
				}],
				current: 0,
				newsList: [],
				sortList: [{
						id: 'one',
						name: '9.9专区'
					},
					{
						id: 'two',
						name: '限时秒杀'
					},
					{
						id: 'three',
						name: '拼团'
					},
					{
						id: 'fore',
						name: '土特产'
					},
					{
						id: 'five',
						name: '二手'
					},
					{
						id: 'six',
						name: '更多'
					}
				],
				tabIndex: 0,
				scrollInto: ''

			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			ontabChange(e) {
				let index = e.target.current || e.detail.current;
				this.tabIndex = index
				this.scrollInto = this.sortList[index].id

			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index
				this.scrollInto = this.sortList[index].id

			},
			switchTab(index) {
				if (this.newsList[index].data.length === 0) {
					this.getList(index);
				}

				if (this.tabIndex === index) {
					return;
				}

				// 缓存 tabId
				if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
					let isExist = this.cacheTab.indexOf(this.tabIndex);
					if (isExist < 0) {
						this.cacheTab.push(this.tabIndex);
						//console.log("cache index:: " + this.tabIndex);
					}
				}

				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0];
					this.clearTabData(cacheIndex);
					this.cacheTab.splice(0, 1);
					//console.log("remove cache index:: " + cacheIndex);
				}
			},


		}
	}
</script>

<style lang="scss" scoped>
	.a {
		height: 80upx;
		line-height: 80upx;
		background-color: #D6D6D6;
		display: flex;

		.scroll {
			width: 100%;

			.item {
				// width: 800upx;
				height: 100%;
				display: flex;

				.item1 {
					flex: 1;
					min-width: 300upx;
					max-width: 300upx;
				}
			}
		}

	}
</style>
